<template>
	<a-layout-content
			style="flex: 0 0 1270px;min-width: 1270px;max-width: 1270px;width: 1270px;position: relative;left: 15px;background: #ffffff !important;">
		<right-top icon="19.png" text="事件创建">


		</right-top>
		<div class="right-content">
			<a-form-model :model="eventForm" layout="inline" style="margin-left: 13%" :form="form">


				<a-row style="margin-top: 20px;">
					<a-col :span="15">
						<a-form-model-item :label-col="{span:4}" :wrapper-col="{span:18}" style="width: 100%">
							<span slot="label"><span style="color: red;">*</span>事件名称</span>
							<a-input class="inputBox" v-model="eventForm.ruleName" @change="
                            	eventForm.ruleName = eventForm.ruleName.replace(
                            		/[, ]/g,
                            		''
                            	)
                            " @blur="checkNum1(eventForm.ruleName)"/>
						</a-form-model-item>
					</a-col>
				</a-row>

				<a-row style="padding-left: 2.5%;">
					<a-col :span="7" style="padding-left : -1%">
						<a-form-model-item :label-col="{span:6}" :wrapper-col="{span:17}" style="width: 100%;">
							<span slot="label"><span style="color: red;">*</span>事件分类</span>
							<a-select placeholder="一级分类" style="padding-left: 5%;" v-model="eventForm.oneEventType"
							          @change="oneType">
								<a-select-option v-for="item in oneLevel" :key="item.id">
									{{ item.name }}
								</a-select-option>
							</a-select>
						</a-form-model-item>
					</a-col>

					<a-col :span="5">
						<a-form-model-item label="" :label-col="{span:0}" :wrapper-col="{span:23}" style="width: 100%;">
							<a-select placeholder="二级分类" style="" v-model="eventForm.twoEventType" @change="twoType">
								<a-select-option v-for="item in twoLevel" :key="item.id">
									{{ item.name }}
								</a-select-option>
							</a-select>
						</a-form-model-item>
					</a-col>
					<a-col :span="5">
						<a-form-model-item label="" :label-col="{span:0}" :wrapper-col="{span:23}" style="width: 100%;">
							<a-select placeholder="三级分类" style="" v-model="eventForm.threeEventType">
								<a-select-option v-for="item in threeLevel" :key="item.id">
									{{ item.name }}
								</a-select-option>
							</a-select>
						</a-form-model-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="24" style="margin-left:-47px">
						<a-form-model-item :label-col="{span:4}" :wrapper-col="{span:18}" style="width: 100%;margin-left:-23px"
						                   prop="gmCommandId" ref="gmCommandId">
							<span slot="label"><span style="color: red;">*</span>通用监测规则名称</span>
							<div style="padding:20px;background-color:#f7f7f7">
								<a-transfer
										:data-source="mockData"
										:list-style="{
                                              width: '330px',
                                              height: '300px',
                                              backgroundColor:'white'
                                                   }"
										:operations="['>>', '<<']"
										:target-keys="targetKeys"
										:render="item => `${item.description}`"
										@change="handleChange"
										v-model="eventForm.gmCommandId"
										@blur="() => {$refs.gmCommandId.onFieldBlur();}"

								>
                                <span slot="notFoundContent">
      没数据
    </span>
								</a-transfer>
							</div>
						</a-form-model-item>
					</a-col>
				</a-row>
				<a-row style="margin-top:350px" v-show="ruleFlag == 1">
					<a-col :span="15">
						<a-form-model-item :label-col="{span:4}" :wrapper-col="{span:18}" style="width: 100%">
							<span slot="label"><span style="color: red;">*</span>可见性</span>
							<a-radio-group name="radioGroup" style="margin-left:24px" v-model="eventForm.isShow">
								<a-radio :value="1">
									系统
								</a-radio>
								<a-radio :value="2">
									仅自己
								</a-radio>
							</a-radio-group>
						</a-form-model-item>
					</a-col>
				</a-row>
				<a-row style="margin-top:350px" v-show="ruleFlag == 2"><!--吴江说普通角色只能选择仅自己，不能修改-->
					<a-col :span="15">
						<a-form-model-item :label-col="{span:4}" :wrapper-col="{span:18}" style="width: 100%">
							<span slot="label"><span style="color: red;">*</span>可见性</span>
							<a-radio-group name="radioGroup" style="margin-left:24px" disabled v-model="eventForm.isShow">
								<a-radio :value="1">
									系统
								</a-radio>
								<a-radio :value="2">
									仅自己
								</a-radio>
							</a-radio-group>
						</a-form-model-item>
					</a-col>
				</a-row>
				<a-row style="margin-left: 1%">
					<a-col :span="15" class="noborder">
						<a-form-item :label-col="{span:4}"
						             :wrapper-col="{span:18}"
						             label="媒体类型" style="">
							<a-checkbox-group name="contractClass" style="width: 200%;margin-top: -2%">
								<a-row>
									<a-col style="margin-left: 20px;" :span="2">
										<a-checkbox :indeterminate="indeterminate" :checked="AllCheckmedia"
										            @change="onCheckAllChange_media">
											全部
										</a-checkbox>
									</a-col>
									<div style="margin-left:-20px" class="plainoption">
										<a-checkbox-group v-model="checkedList_media" @change="onChange_media">

											<a-checkbox v-if="i<8" :value="item.mediaName" v-for="(item,i) in media_type">
												{{ item.mediaName }}
											</a-checkbox>
										</a-checkbox-group>
									</div>
								</a-row>
								<a-row style="position: relative;margin-left: -9.3%;" v-show="media_type.length >= 8">
									<a-col :span="21" :push="2" style="margin-left: 2%;">
										<a-checkbox-group v-model="checkedList_media2" @change="onChange_media1">
											<a-checkbox v-if="i>=8" :value="item.mediaName" v-for="(item,i) in media_type">
												{{ item.mediaName }}
											</a-checkbox>
										</a-checkbox-group>
									</a-col>
								</a-row>
							</a-checkbox-group>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row style="margin-top: 3%;margin-left:-60px">
					<a-col :span="24">
						<a-form-model-item label="全文" :label-col="{span:4}" :wrapper-col="{span:18}" style="width: 90%">

							<a-textarea placeholder="" :rows="4" :auto-size="{ minRows: 4, maxRows: 4 }" v-model="eventForm.content"/>
						</a-form-model-item>
					</a-col>
				</a-row>
				<a-row style="margin-top: 5%;margin-left:0px">
					<a-col :span="23" style="margin-left:-60px">
						<a-form-model-item label="标题" :label-col="{span:4}" :wrapper-col="{span:18}" style="width: 100%">
							<a-input style="width:779px" placeholder="" v-model="eventForm.title"></a-input>

						</a-form-model-item>

					</a-col>

				</a-row>

				<a-row>
					<a-col :span="23" style="margin-left:-60px">
						<a-form-model-item label="关键词" :label-col="{span:4}" :wrapper-col="{span:18}" style="width: 100%">
							<a-input style="width:779px" placeholder="" v-model="eventForm.keyword"></a-input>
						</a-form-model-item>

					</a-col>
				</a-row>
				<a-row style="">
					<a-col :span="15">
						<a-form-model-item :label-col="{span:4}" :wrapper-col="{span:18}" style="width: 100%;">
							<span slot="label"><span style="color: red;">*</span>倾向性</span>
							<a-select placeholder="请选择" default-value="1" style="" v-model="eventForm.emotionalPolarity">
								<a-select-option value="1">正面</a-select-option>
								<a-select-option value="2">中性</a-select-option>
								<a-select-option value="3">负面</a-select-option>
							</a-select>
						</a-form-model-item>
					</a-col>
				</a-row>

				<a-row style="margin-top: 0%">
					<a-col :span="8" style="margin-left:-37px">
						<a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%;">
							<span slot="label"><span style="color: red;">*</span>文章级别</span>
							<a-select placeholder="请选择" v-model="eventForm.levelInference">
								<a-select-option value="3">重要级别</a-select-option>
								<a-select-option value="2">中等级别</a-select-option>
								<a-select-option value="1">一般级别</a-select-option>
							</a-select>
						</a-form-model-item>
					</a-col>
					<a-col :span="3" style="margin-left: 31px;">
						<span style="margin-left: 27%;color: black"><span style="color: red">*</span> 发布日期：</span>
					</a-col>
					<a-col :span="4" style="margin-left: -25px">

						<a-date-picker show-time style="width:200px" v-model="eventForm.monitorDateStart"
						               format="YYYY-MM-DD HH:mm:ss">
							<template slot="renderExtraFooter">

							</template>
						</a-date-picker>
					</a-col>
					<a-col :span="1">
						<span style="font-size: 20px;margin-left:50%">~</span>
					</a-col>
					<a-col :span="4" style="margin-left:-5px">
						<a-date-picker show-time style="width:200px" v-model="eventForm.monitorDateEnd" format="YYYY-MM-DD HH:mm:ss"
						               @change="timeFlag">
							<template slot="renderExtraFooter">

							</template>
						</a-date-picker>
					</a-col>

				</a-row>
				<a-row>
					<a-col :span="8" style="margin-left:47px">
						<a-form-model-item label="发布媒体" :label-col="{span:4}" :wrapper-col="{span:18}" style="width: 100%">
							<a-input style="width:330px" v-model="eventForm.informationSources"></a-input>

						</a-form-model-item>

					</a-col>
					<a-col :span="8" style="margin-left:84px">
						<a-form-model-item label="作者" :label-col="{span:4}" :wrapper-col="{span:18}" style="width: 100%">
							<a-input style="width:330px" v-model="eventForm.author"></a-input>

						</a-form-model-item>

					</a-col>
				</a-row>


				<a-row style="margin-left: 4%">
					<a-col :span="20" style="text-align: center">
						<a-button style="margin-right: 10px;color: black" @click="goHomePage">返回</a-button>
						<a-button style="margin-right: 10px;background-color: #22AD38;color: white" @click="buttonAdd">添加
						</a-button>
						<a-button style="margin-right: 10px;color: black" @click="handleReset">重置</a-button>
					</a-col>
				</a-row>

			</a-form-model>
		</div>
	</a-layout-content>
</template>

<script>

import left from './left/index'
import rightTop from './right/top'

import {add, getOneEventType, getThreeEventType, getTwoEventType} from '@/api/eventAnalyze/eventAnalyze'
import {getMediaTypeList} from '@/api/eventAnalyze/eventAnalyzeResults'
import {ruleNameList} from "@/api/generalDetection/generalDetetion";

export default {
	name: "eventAnalyzecreate",
	components: {
		left,
		rightTop
	},
	data() {
		return {
			indeterminate: false,
			ruleFlag: 1, // 判断角色是否是普通业务人员角色
			oneLevel: [], // 获取一级分类
			twoLevel: [], // 获取二级分类
			threeLevel: [], // 获取三级分类
			media_type: [], // 媒体类型
			AllCheckmedia: false,
			checkedList_media: [], // 收集媒体类型名称
			checkedList_mediaId: [], // 收集媒体类型id
			checkedList_media2: [],// 收集媒体类型名称
			user: (JSON.parse(localStorage.getItem('user')) ? JSON.parse(localStorage.getItem('user')) : {
				'realName': "***"
			}), // 当前用户信息
			change: 1,
			form: this.$form.createForm(this), //搜索表单数据
			mockData: [], //获取通用检测规则名称
			targetKeys: [],//收集通用检测规则id
			labelCol: {span: 10},
			wrapperCol: {span: 14},
			eventForm: {// 收集要添加的数据
				ruleName: '',
				oneEventType: undefined,
				twoEventType: undefined,
				threeEventType: undefined,
				gmCommandId: '',
				mediaType: [],
				content: '',
				title: '',
				keyword: '',
				emotionalPolarity: undefined,
				levelInference: undefined,
				monitorDateStart: undefined,
				monitorDateEnd: undefined,
				informationSources: undefined,
				author: undefined,
				isShow: 2,
			},
		}
	},
	props: {
		// 父类this
		parent: {
			type: Object,
		}
	},
	methods: {
		checkNum1(value) {
			if (value.trim().length > 255) {
				this.$message.error('事件名称输入过长，请重新输入')
				this.eventForm.ruleName = ''
			}
		},
		/**
		 * 监听一级分类获取二级分类
		 */
		oneType() {
			this.two();
			this.eventForm.twoEventType = undefined;
			this.eventForm.threeEventType = undefined;
		},
		/**
		 * 监听二级分类获取三级分类
		 */
		twoType() {
			this.Three();
			this.eventForm.threeEventType = undefined;
		},

		// 媒体类型 (点击全部)
		onCheckAllChange_media(e) {
			this.AllCheckmedia = !this.AllCheckmedia
			if (this.AllCheckmedia) {
				this.media_type.forEach((item, i) => {
					if (i < 8) {
						this.checkedList_media.push(item.mediaName)
					}
				});
				this.media_type.forEach((item, i) => {
					if (i >= 8) {
						this.checkedList_media2.push(item.mediaName)
					}
				})
			} else {
				this.checkedList_media.splice(0)
				this.checkedList_media2.splice(0)
			}

		},
		// 媒体类型 (点击单个)
		onChange_media(e) {
			this.checkedList_media = [];
			this.checkedList_mediaId = [];
			this.checkedList_media = e;
			if (this.media_type.length === (this.checkedList_media.length + this.checkedList_media2.length)) {
				this.AllCheckmedia = true;
			} else {
				this.AllCheckmedia = false;
			}
		},
		// 媒体类型 (点击单个)
		onChange_media1(e) {
			this.checkedList_media2 = [];
			this.checkedList_mediaId = [];
			this.checkedList_media2 = e;
			if (this.media_type.length === (this.checkedList_media.length + this.checkedList_media2.length)) {
				this.AllCheckmedia = true;
			} else {
				this.AllCheckmedia = false;
			}
		},
		handleChange(targetKeys, direction, moveKeys) {
			console.log(targetKeys, direction, moveKeys);
			this.targetKeys = targetKeys;
			this.eventForm.gmCommandId = this.targetKeys;
		},


		timeFlag() {
			if (this.eventForm.monitorDateStart >= this.eventForm.monitorDateEnd) {
				this.$message.error('开始时间不能大于结束时间');
				this.eventForm.monitorDateEnd = undefined;
				return;
			}
		},

		// 点击添加按钮
		buttonAdd() {
			let mediaTypeIdList = [];
			this.checkedList_media.forEach((item) => {
				mediaTypeIdList.push(item)
			})
			this.checkedList_media2.forEach((item) => {
				mediaTypeIdList.push(item)
			})

			for (let i = 0; i < mediaTypeIdList.length; i++) {
				for (let k = 0; k < this.media_type.length; k++) {
					if (mediaTypeIdList[i] == this.media_type[k].mediaName) {
						this.checkedList_mediaId.push(this.media_type[k].id)
					}
				}
			}

			if (this.eventForm.ruleName == '' || this.eventForm.ruleName == undefined) {
				this.$message.error('请输入事件名称');
				return
			}

			if (this.eventForm.oneEventType == '' || this.eventForm.oneEventType == undefined) {
				this.$message.error('请选择事件分类');
				return
			}

			if (this.eventForm.gmCommandId == '' || this.eventForm.gmCommandId == undefined) {
				this.$message.error('请选择通用检测规则名称');
				return
			}

			if (this.eventForm.emotionalPolarity == '' || this.eventForm.emotionalPolarity == undefined) {
				this.$message.error('请选择倾向性');
				return
			}

			if (this.eventForm.levelInference == '' || this.eventForm.levelInference == undefined) {
				this.$message.error('请选择文章级别');
				return
			}

			if (this.eventForm.monitorDateStart == '' || this.eventForm.monitorDateStart == undefined) {
				this.$message.error('请选择发布日期开始时间');
				return
			}

			if (this.eventForm.monitorDateEnd == '' || this.eventForm.monitorDateEnd == undefined) {
				this.$message.error('请选择发布日期结束时间');
				return
			}
			if (this.eventForm.monitorDateStart >= this.eventForm.monitorDateEnd) {
				this.$message.error('开始时间不能大于结束时间');
				return;
			}

			/*this.$refs.ruleForm.validate(valid => {
					if (valid) {*/
			add({
				"ruleName": this.eventForm.ruleName,
				"oneEventType": this.eventForm.oneEventType,
				"twoEventType": this.eventForm.twoEventType,
				"threeEventType": this.eventForm.threeEventType,
				"gmCommandId": this.eventForm.gmCommandId.join(","),
				"mediaType": mediaTypeIdList.join(","),
				"mediaTypeIds": this.checkedList_mediaId.join(","),
				"content": this.eventForm.content,
				"title": this.eventForm.title,
				"keyword": this.eventForm.keyword,
				"emotionalPolarity": this.eventForm.emotionalPolarity,
				"levelInference": this.eventForm.levelInference,
				"monitorDateStart": this.eventForm.monitorDateStart ? this.eventForm.monitorDateStart.format('YYYY-MM-DD HH:mm:ss') : '',
				"monitorDateEnd": this.eventForm.monitorDateEnd ? this.eventForm.monitorDateEnd.format('YYYY-MM-DD HH:mm:ss') : '',
				"informationSources": this.eventForm.informationSources,
				"author": this.eventForm.author,
				"isShow": this.eventForm.isShow,
			}).then(res => {
				if (res.status == 200) {
					this.$message.success('规则创建成功！日志正在生成中，请等待...');
					this.parent.event_create = false;
					this.parent.wlzp = true;
					this.parent.treeList();
				} else {
					this.$message.error('执行失败');
				}
			}).catch(err => {
				console.log(err)
			})
		},
		//重置搜索栏
		handleReset() {
			this.form.resetFields();
			this.eventForm = {
				ruleName: '',
				oneEventType: undefined,
				twoEventType: undefined,
				threeEventType: undefined,
				gmCommandId: '',
				mediaType: [],
				content: '',
				title: '',
				keyword: '',
				emotionalPolarity: undefined,
				levelInference: undefined,
				monitorDateStart: undefined,
				monitorDateEnd: undefined,
				informationSources: undefined,
				author: undefined,
				isShow: 2,
			};
			ruleNameList({}).then(res => {
				this.mockData = [];
				// this.mockData = res.data
				for (let i = 0; i < res.data.length; i++) {
					const data = {
						key: res.data[i].id,
						title: res.data[i].id,
						description: res.data[i].ruleName,
					}
					this.mockData.push(data);
				}
				this.targetKeys = [];
			})
			this.checkedList_media = [];
			this.checkedList_media2 = [];
			this.checkedList_mediaId = [];
		},
		callback(tag) {
			if (tag == 1) {
				this.change = 1;
			}
			if (tag == 2) {
				this.change = 2;
			}
		},

		/**
		 * 返回按钮
		 */
		goHomePage() {
			this.parent.event_create = false;
			this.parent.wlzp = true;
		},

		// 获取一级分类
		one() {
			getOneEventType().then(res => {
				this.oneLevel = res.data;
			})
		},
		// 获取二级分类
		two() {
			if (this.eventForm.oneEventType != undefined) {
				getTwoEventType({
					oneEventType: this.eventForm.oneEventType,
				}).then(res => {
					this.twoLevel = res.data;
				})
			}
		},
		// 获取三级分类
		Three() {
			if (this.eventForm.twoEventType != undefined) {
				getThreeEventType({
					twoEventType: this.eventForm.twoEventType,
				}).then(res => {
					this.threeLevel = res.data;
				})
			}
		}

	},
	mounted() {
		// 获取媒体类型
		getMediaTypeList().then(res => {
			this.media_type = res.data;
		});
		this.one();
		this.two();
		this.Three();
		// 获取通用监测规则名称
		ruleNameList({}).then(res => {
			for (let i = 0; i < res.data.length; i++) {
				const data = {
					key: res.data[i].id,
					title: res.data[i].id,
					description: res.data[i].ruleName,
				}
				this.mockData.push(data);
			}
			this.targetKeys = [];
		})

		// getRuleId().then(res => {
		//     // 如果角色是普通业务人员
		//   if(res.data == "ROLE.ORDINARY.BUSINESS"){
		//     this.ruleFlag = 2;
		//   }
		// })

	}
}
</script>

<style scoped lang="scss">
.plainoption {
	margin-left: -20px！importment
}


/deep/ .ant-transfer-operation .ant-btn .anticon {
	display: none
}

.inputBox {
	height: 40px;
}

/deep/ .ant-select-selection--single {
	height: 40px;
}

/deep/ .ant-select-selection__rendered {
	height: 35px;
}


.right-content {
	margin-bottom: 40px;

	.ant-row {
		height: 50px;
		line-height: 50px;

		.content-left {
			text-align: right;
			font-size: 14px;
			height: 100%;
		}

		.content-right {
			float: right;
			height: 100%;
			position: relative;
			left: -30px;

			.ant-input {
				width: 480px;
				height: 40px;
				border-radius: 3px;
			}
		}
	}
}

/deep/ .ant-tabs-bar {
	border-bottom: 0px solid #e8e8e8 !important;
}

/deep/ .ant-tabs-tab {
	font-size: 15px !important;
}

.listv2-root {
	width: 100%;
	height: 100%;
	position: relative;
}

/deep/ .ant-list-item-meta-avatar {
	margin-right: 0px;
}

/deep/ .buttona1 > span {
	color: black;
	font-size: 13px;
	cursor: pointer;
}
</style>
